<template>
  <div id="app" class="xj-home-main">
    <!-- <keep-alive>
        <transition :name="transitionName">
            <router-view v-if="$route.meta.keepAlive" class="child-view"></router-view>
        </transition>
    </keep-alive> -->
    <transition :name="transitionName">
        <router-view v-if="!$route.meta.keepAlive" class="position-div"></router-view>
    </transition>
    <van-tabbar v-if="!$route.query.isSelf" v-show="$route.meta.index==0 || $route.meta.index" active-color="#fe8417" style="border-top: 1px solid #ccc" v-model="active">
      <van-tabbar-item replace to="/home" :icon="$route.meta.index === 0 ? 'shop' : 'shop-o'">首页</van-tabbar-item>
      <van-tabbar-item replace to="/shop" :icon="$route.meta.index === 1 ? 'shopping-cart' : 'shopping-cart-o'">附近商家</van-tabbar-item>
      <van-tabbar-item replace to="/advertisingList" :icon="$route.meta.index === 2 ? 'star' : 'star-o'">广告分享</van-tabbar-item>
      <van-tabbar-item replace to="/myMain" :icon="$route.meta.index === 3 ? 'friends' : 'friends-o'">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'App',
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true,
      active: 0,
      transitionName: 'fade'
    }
  },
  watch: {
    ['$route.meta.index']: {
      handler(newVal) {
        // console.log(newVal)
        this.active = newVal;
      },
      deep: true,

    },
    '$route' (to, from) {
        // if(to.meta.slide> from.meta.slide){
        //         this.transitionName = "slide-right"
        //     }else{
        //         // console.log("from.meta" + from.meta);
        //         this.transitionName = "slide-left"
        //     }
      }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  },
  mounted() {
    document.body.addEventListener('touchstart', function () { });
    setTimeout(() => {
        this.active = this.$route.meta.index;
    }, 0)
  }
}

</script>

<style lang="scss">
.btn-active:active {
  background: #ccc !important;
  -webkit-tap-highlight-color:transparent;
}
.van-sku-stepper-stock {
    display: none !important;
  }
.van-sku-header-item {
  display: none !important;
}
.van-cell-group {
  &::after {
    border: none !important;
  }
}
.xj-home-main {
  font-size: px2rem(12);
  padding-bottom: 50px;
  // overflow: hidden;
  // height: 100vh;
  // position: fixed;
  width: 100%;
  // overflow: scroll;
}
.child-view {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all .5s cubic-bezier(.55,0,.1,1);
}
.position-div{
   position:absolute;
   left:0;
   right:0;
   top:0;
   bottom:0;
}
// .slide-left-enter, .slide-right-leave-active {
//   opacity: 0;
//   -webkit-transform: translate(30px, 0);
//   transform: translate(30px, 0);
// }
// .slide-left-leave-active, .slide-right-enter {
//   opacity: 0;
//   -webkit-transform: translate(-30px, 0);
//   transform: translate(-30px, 0);
// }
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 300ms;
}

.fade-enter {
  opacity:0;
}
.fade-leave{
  opacity:1;
}
.fade-enter-active{
  transition:opacity .3s;
}
.fade-leave-active{
  opacity: 0;
  transition:opacity .3s;
}

.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-to {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-to {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>
